<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="${pageContext.request.contextPath}" var="ctx" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="${ctx}/css/skin.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/css/page.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/backOffice.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.myPagination.js"></script>
<script type="text/javascript">
	var currSelect = '';
	$(function() {
		page(1);
	})
	function dataFormat(date) {
		var year = date.getFullYear();
		var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1)
				: (date.getMonth() + 1);
		var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
		var hour = date.getHours() < 10 ? '0' + date.getHours() : date
				.getHours();
		var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date
				.getMinutes();
		var second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date
				.getSeconds();
		return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":"
				+ second;
	}
	function page(pageIndex) {
		$("#demo1").myPagination({
			currPage : pageIndex,
			ajax : {
				on : true,
				dataType : 'json',
				url : '${ctx}/approval/post',
				callback : 'showData',
				param : {
					on : true,
					type : 'all'
				}
			}
		});
	}

	function showData(data) {
		var rows = data.data.rows;
		var str = '';
		var tmpleave;
		for ( var i = 0; i < rows.length; i++) {
			str += '<tr>';
			str += '<td align="center"><input type="checkbox" value="'+rows[i].id+'"></td>';
			str += '<td height="30" class="left_txt2" align="center">'
					+ ((currPage - 1) * 10 + (i + 1)) + '</td>';
			str += '<td height="30" class="left_txt2" align="center">'
					+ rows[i].userEntity.trueName + '</td>';
			var taskType = '';
			if (rows[i].taskType == 'leave') {
				if (rows[i].leaveType == "personal") {
					tmpLeave = "事假";
				} else if (rows[i].leaveType == "sick") {
					tmpLeave = "病假";
				} else if (rows[i].leaveType == "marriage") {
					tmpLeave = "婚假";
				} else if (rows[i].leaveType == "funeral") {
					tmpLeave = "丧假";
				} else if (rows[i].leaveType == "maternity") {
					tmpLeave = "产假";
				} else if (rows[i].leaveType == "father") {
					tmpLeave = "父亲假";
				} else if (rows[i].leaveType == "visiting") {
					tmpLeave = "外派探亲假";
				} else if (rows[i].leaveType == "annual") {
					tmpLeave = "年假";
				}
				taskType = '请假（' + tmpLeave + "）";
			} else if (rows[i].taskType == 'workovertime') {
				taskType = '加班';
			} else if (rows[i].taskType == 'paidleave') {
				taskType = '调休';
			}
			str += '<td height="30" class="left_txt2" align="center">'
					+ taskType + '</td>';
			str += '<td height="30" class="left_txt2">'
					+ dataFormat(new Date(rows[i].creationDate)) + '</td>';
			str += '<td height="30" class="left_txt2">'
					+ dataFormat(new Date(rows[i].beginDate)) + '</td>';
			if (rows[i].taskType == 'workovertime') {
				str += '<td height="30" class="left_txt2">'
						+ dataFormat(new Date(rows[i].endDate)) + '</td>';
			} else {
				str += '<td height="30" class="left_txt2">' + rows[i].days
						+ '</td>';
			}

			str += '<td height="30" class="left_txt2"><a href="#" onclick="queryById('
					+ rows[i].id + ')">查看</a></td>';
			str += '</tr>';
		}
		$('#records').html('').html(str);
	}

	function selectAll() {
		var obj = $('input[type=checkbox]');
		obj.each(function() {
			$(this).attr("checked", true);
		});
	}

	function unselectAll() {
		var obj = $('input[type=checkbox]');
		obj.each(function() {
			if ($(this).attr("checked") == 'checked') {
				$(this).attr("checked", false);
			} else {
				$(this).attr("checked", true);
			}

		});
	}

	function queryById(id) {
		var obj = {};
		obj.type = 'get';
		obj.id = id;
		$('#grayDiv').show();
		$.ajax({
			url : '${ctx}/approval/post',
			type : 'post',
			data : obj,
			dataType : 'json',
			success : function(data) {
				if (data.status == 200) {
					currSelect = data.taskEntity.id;
					$('#detailed').show();
					$('#taskUser').text(data.taskEntity.userEntity.trueName);
					var taskType = '';
					if (data.taskEntity.taskType == 'leave') {
						taskType = '请假';
						$("#tdTmp").html("天数：");
						$("#taskTmp").html(data.taskEntity.days);
					} else if (data.taskEntity.taskType == 'workovertime') {
						taskType = '加班';
						$("#tdTmp").html("结束时间：");
						$("#taskTmp").html(dataFormat(new Date(data.taskEntity.endDate)));
					} else if (data.taskEntity.taskType == 'paidleave') {
						taskType = '调休';
						$("#tdTmp").html("天数：");
						$("#taskTmp").html(data.taskEntity.days);
					}
					$('#taskType').text(taskType)
					$('#creationDate').text(dataFormat(new Date(data.taskEntity.creationDate)));
					$('#taskStartDate').text(dataFormat(new Date(data.taskEntity.beginDate)));
					$('#taskDesc').text('').text(data.taskEntity.remark);
				}
			}
		});
	}

	function closeDetailed() {
		$('#detailed').hide();
		$('#grayDiv').hide();
		currSelect = '';
	}
	//审批单条
	function submitProval_one(result) {
		var desc = $.trim($('#approvalDesc').val());
		var obj = {};
		obj.type = 'provalOne';
		obj.id = currSelect;
		obj.result = result;
		obj.desc = desc;
		$.ajax({
			type : 'post',
			url : '${ctx}/approval/post',
			data : obj,
			dataType : 'json',
			success : function(data) {
				if (data.status == 200) {
					$.msgbox.show({
						message : '提交成功',
						icon : 'ok',
						beforeHide : function() {
							location.reload();
						}
					});
				} else if (data.stauts == 201) {
					$.msgbox.show({
						message : data.text,
						icon : 'ok'
					});
				}
			}
		});
	}
	//审批多条
	function submitProval_more(result) {
		var arr = '';
		var obj = $('input[type=checkbox]:checked');
		if (obj.length == 0) {
			$.msgbox.show({
				message : '未选中任何数据',
				icon : 'no'
			});
			return;
		}
		obj.each(function() {
			if ($(this).attr("checked") == 'checked') {
				arr += $(this).val() + ',';
			}
		});
		var obj = {};
		obj.type = 'provalMore';
		obj.ids = arr;
		obj.result = result;
		$.ajax({
			type : 'post',
			url : '${ctx}/approval/post',
			data : obj,
			dataType : 'json',
			success : function(data) {
				if (data.status == 200) {
					$.msgbox.show({
						message : '提交成功',
						icon : 'ok',
						beforeHide : function() {
							location.reload();
						}
					});
				}
			}
		});
	}
</script>
</head>
<body>
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td width="17" height="29" valign="top"
				background="${ctx}/images/mail_leftbg.gif"><img
				src="${ctx}/images/left-top-right.gif" width="17" height="29" /></td>
			<td width="" height="29" valign="top"
				background="${ctx}/images/content-bg.gif"><table width="100%"
					height="31" border="0" cellpadding="0" cellspacing="0"
					class="left_topbg" id="table2">
					<tr>
						<td height="31"><div class="titlebt">待审批</div></td>
					</tr>
				</table></td>
			<td width="16" valign="top"
				background="${ctx}/images/mail_rightbg.gif"><img
				src="${ctx}/images/nav-right-bg.gif" width="16" height="29" /></td>
		</tr>
		<tr>
			<td height="71" valign="middle"
				background="${ctx}/images/mail_leftbg.gif">&nbsp;</td>
			<td valign="top" bgcolor="#F7F8F9"><table width="100%"
					height="138" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td height="13" valign="top">&nbsp;</td>
					</tr>
					<tr>
						<td valign="top"><table width="98%" border="0" align="center"
								cellpadding="0" cellspacing="0">
								<tr>
									<td class="left_txt">当前位置：待审批</td>
								</tr>
								<tr>
									<td height="20"><table width="100%" height="1" border="0"
											cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
											<tr>
												<td></td>
											</tr>
										</table></td>
								</tr>

								<tr>
									<td><table width="100%" height="31" border="0"
											cellpadding="0" cellspacing="0" class="nowtable">
											<tr>
												<td class="left_bt2">&nbsp;&nbsp;&nbsp;&nbsp;待审批记录</td>
											</tr>
										</table></td>
								</tr>
								<tr>
									<td width="100%;" valign="top">
										<table width="100%" border="0" cellspacing="0" cellpadding="0"
											class="tblExcel">
											<tr bgcolor="">
												<td align="center">选择</td>
												<td height="30" class="left_txt2" align="center">序号</td>
												<td height="30" class="left_txt2" align="center">申请人</td>
												<td height="30" class="left_txt2" align="center">申请类型</td>
												<td height="30" class="left_txt2">填表时间</td>
												<td height="30" class="left_txt2">开始时间</td>
												<td height="30" class="left_txt2">结束时间or天数</td>
												<td height="30" class="left_txt2"></td>
											</tr>
											<tbody id="records">

											</tbody>
										</table>
									</td>
								</tr>
							</table></td>
					</tr>
					<tr style="height: 30px;">
						<td height="20"><span class="left_txt2">选择：<a
								href="javascript:void(0);" class="" onclick="selectAll();">全选</a>-<a
								href="javascript:void(0);" class="" onclick="unselectAll();">反选</a></span>
							<input name="Submit" type="button" class="" value="同意"
							onclick="submitProval_more(1)" /> <input name="Submit"
							type="button" class="" value="拒绝" onclick="submitProval_more(2)" />
					</tr>
				</table>
				<div id="demo1"></div></td>
			<td background="${ctx}/images/mail_rightbg.gif">&nbsp;</td>
		</tr>
		<tr>
			<td valign="middle" background="${ctx}/images/mail_leftbg.gif"><img
				src="${ctx}/images/buttom_left2.gif" width="17" height="17" /></td>
			<td height="17" valign="top"
				background="${ctx}/images/buttom_bgs.gif"><img
				src="${ctx}/images/buttom_bgs.gif" width="17" height="17" /></td>
			<td background="${ctx}/images/mail_rightbg.gif"><img
				src="${ctx}/images/buttom_right2.gif" width="16" height="17" /></td>
		</tr>
	</table>

	<div
		style="display: none; position: absolute; left: 100px; top: 62px; height: 340px; width: 600px; z-index: 10;"
		id="detailed">
		<table width="100%" border="0" align="center" cellpadding="0"
			cellspacing="0" bgcolor="#f2f2f2" class="left_txt2">
			<tr>
				<td colspan="2" bgcolor="#E1E5EE" align="center" class="left_bt2"
					style="font-size: 15px;">详情<span
					style="float: right; cursor: pointer;" onclick="closeDetailed()">关闭
				</span></td>
			</tr>
			<tr>
				<td width="110px;" align="right">申请人：</td>
				<td height="30" id="taskUser"></td>
			</tr>
			<tr>
				<td width="110px;" align="right">申请类型：</td>
				<td height="30" id="taskType"></td>
			</tr>
			<tr>
				<td align="right">填表时间：</td>
				<td height="30" id="creationDate"></td>
			</tr>
			<tr>
				<td align="right">开始时间：</td>
				<td height="30" id="taskStartDate"></td>
			</tr>
			<tr>
				<td align="right" id="tdTmp"></td>
				<td height="30" id="taskTmp"></td>
			</tr>
			<tr>
				<td align="right">申请理由：</td>
				<td height="30" id="taskDesc"></td>
			</tr>
			<tr>
				<td align="right">审批备注：</td>
				<td height="30" align="left"><textarea rows="3" cols="50"
						id="approvalDesc"></textarea></td>
			</tr>
			<tr align="center">
				<td colspan="2"><input type="button" value="同意"
					onclick="submitProval_one(1)" /> <input type="button" value="拒绝"
					onclick="submitProval_one(2)" /></td>
			</tr>

		</table>
	</div>
	<div id="grayDiv"
		style="filter: alpha(opacity =          50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; background-color: Gray; width: 100%; height: 100%; top: 0px; position: absolute; display: none;"></div>
</body>
</html>